<template>
  <div>
    <!--    面包屑+新增按钮+批量删除按钮+搜索框和按钮-->
    <div>
      <div style="height: 30px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">班级管理</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="width: 100%;height: 60px;display: flex;;flex-direction: row;justify-content:space-between">
        <div style="width: 100%;height: 60px">
          <el-button icon="el-icon-plus" style="margin-left: 10px" @click="bAdd">新增</el-button>
          <el-button icon="el-icon-delete"  @click="batchDelete">批量删除</el-button>
        </div>
        <!--        新增弹出框-->
        <div>
          <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="30%">
            <div>
              <el-form :label-position="labelPosition" label-width="80px" :model="formAdd">
                <el-form-item label="班级名称">
                  <el-input v-model="formAdd.name"></el-input>
                </el-form-item>
                <el-form-item label="班级简介">
                  <el-input v-model="formAdd.brief"></el-input>
                </el-form-item>
                <!--                <el-form-item label="班级人数">-->
                <!--                  <el-input v-model="formAdd.number"></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item label="班主任名">
                  <el-input v-model="formAdd.manager"></el-input>
                </el-form-item>
<!--                <div class="block">-->
<!--                  <span class="demonstration" style="margin-left: 10px">创建日期</span>-->
<!--                  <el-date-picker-->
<!--                    style="margin-left: 15px"-->
<!--                    v-model="formAdd.time"-->
<!--                    type="date"-->
<!--                    placeholder="选择日期">-->
<!--                  </el-date-picker>-->
<!--                </div>-->
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addClass">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <!--        搜索框-->
        <div style="width: 45%;">
          <el-input v-model="search" placeholder="请输入名称" clearable style="width: 200px"></el-input>
          <el-button  @click="searchName" icon="el-icon-search"></el-button>
        </div>

      </div>
    </div>
    <!--    内容展示-->
    <div>
      <el-table
        ref="multipleTable"
        :data="classes"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="cid"
          label="班级编号">
<!--          <template v-slot:default="scope">{{ scope.row.date }}</template>-->
        </el-table-column>
        <el-table-column
          prop="name"
          label="班级名称">
        </el-table-column>
        <el-table-column
          prop="brief"
          label="班级简介"
          show-overflow-tooltip>
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="number"-->
<!--          label="班级人数"-->
<!--          show-overflow-tooltip>-->
<!--        </el-table-column>-->
        <el-table-column
          prop="manager"
          label="班主任"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="time"
          label="创建时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          width="350px"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              title="修改"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope.row)"></el-button>
<!--            <el-button title="删除" icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.row.cid)"></el-button>-->
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              style="margin-left: 5px"
              title="您确定删除吗？"
              @confirm="handleDelete(scope.row.cid)"
            >
              <el-button type="danger" size="mini" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>

    </div>
    <!--    页面显示-->
    <div class="block" style="margin-left: 200px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

  import requests from "@/axios/axios";

export default {
  name: "classManage",
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize:10,
      search:'',
      //新增表单
      dialogVisible: false,
      formAdd: {
        cid:'' ,
        name:'',
        brief:'',
        manager:'',
        time:''
      } ,
      //展示数据内容
      // classes: [],
      //  批量删除
      tableChecked: [],//被选中的记录数据，对应批量删除传的参数值
      ids: [],//批量删除id

      labelPosition: 'right',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      value1: '',
      cid:'',
      classes: [
        {
          cid:'' ,
          name:'',
          brief:'',
          manager:'',
          time:''
        },

      ],
      dialogTitle:''
    };
  },
  mounted() {
    this.getClass();
  },
  methods: {
    edit(row){
      this.dialogTitle = "修改班级"
      this.formAdd = JSON.parse(JSON.stringify(row))//深拷贝
      console.log(this.formAdd);
      this.dialogVisible = true
    },
    //全选按钮设置
    handleSelectionChange(val) {
      this.tableChecked = val;
      console.log(val);
      this.ids = val.map(v => v.cid)//[{id,name},{id,name}]=[id,id]
    },
    //批量删除
    batchDelete(){
      this.ids = this.tableChecked.map(v => v.cid)// 对象数组转换为[1,2,3]
      console.log(this.ids)
      requests.post("http://localhost:8081/banji/deletesByIds",this.ids).then(res =>{
        console.log(res);
        if (res.code == '0'){
          this.$message.success("批量删除成功")
          this.getClass()//刷新整个列表
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    async handleDelete(cid){
      console.log(cid)
        let res = await this.$API.deleteById(cid);
        if(res.code == 0 || res.code== '0'){
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }else {
          this.$message.error('删除失败');
        }
        //console.log(res);
        this.getClass();
      },
    // 查询获取班级信息
    async getClass (){
      requests.get("/banji/findByPage",{
        params:{
          page:this.currentPage,
          size:this.pageSize
        }
      }).then(res =>{
        console.log("res: "+res)
        this.classes = res.data;
      })
      requests.get("/banji/numberOfBanji").then(res =>{
        // console.log(res)
        this.total = res.data
      })
      // let res = await this.$API.getBanji();
      // this.classes = res.data;
      // //console.log(res);
      // console.log(this.classes)
    },
    //分页
    handleSizeChange(pageSize) {//改变当前每页的个数触发
      console.log(`每页 ${pageSize} 条`);
      this.pageSize = pageSize
      this.getClass()
    },
    handleCurrentChange(pageNum) {//改变当前页码触发
      console.log(`当前页: ${pageNum}`);
      this.currentPage = pageNum
      this.getClass()
    },
    //点击新增，打开对话框
    bAdd(){
      this.dialogTitle = "添加班级"
      this.dialogVisible = true
      this.formAdd = {}
    },
    //确认新增和更新列表
    async addClass(){
      console.log("xiugai:");
      console.log(this.formAdd)
      if (this.dialogTitle == "修改班级"){
        //  更新
        requests.post("/banji/update",this.formAdd).then(res =>{
          console.log(res)
          if (res.code === '0'){
            this.$message({
              type: "success",
              message: "更新成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.getClass()//刷新整个列表
          this.dialogVisible = false
        })

      }
      else{
        //  新增
        requests.post("/banji/insert",this.formAdd).then(res =>{
          console.log(res)
          if (res.code === '0' || res.code === 0){
            this.$message({
              type: "success",
              message: "新增成功"
            })
          }else{
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.getClass()//刷新整个列表
          this.dialogVisible = false
        })
      }
    },
    //查询
    searchName(){
      if (this.search){
        requests.get("/banji/queryByName",{params:{name:this.search}}).then(res =>{
          console.log(res.data)
          console.log(this.search)
          this.classes = res.data;
          this.total = res.data.length
        })
      }else {
        this.getClass()
      }
    }
  }
};
</script>

<style scoped>

</style>